// src/pages/index.js
import React from 'react';
import Layout from '@theme/Layout';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import {ThemeConfig} from '@docusaurus/preset-classic';
import styles from './index.module.css';
import Head from '@docusaurus/Head';

type NavItem = {
  label: string;
  to?: string;
  href?: string;
  items?: NavItem[];
  position?: 'left' | 'right';
};

// 修改接口定义以匹配实际的 Docusaurus 上下文类型
interface CustomThemeConfig extends ThemeConfig {
  navbar: {
    items: NavItem[];
  };
}

function NavCard({item}: {item: NavItem}) {
  if (item.items) {
    return (
        <div className={styles.categorySection}>
          <h2 className={styles.categoryTitle}>{item.label}</h2>
          <div className={styles.cardGrid} role="navigation" aria-label={`${item.label}导航`}>
            {item.items.map((subItem, idx) => (
                <a
                    key={idx}
                    href={subItem.to || subItem.href}
                    className={styles.card}
                    aria-label={`访问${subItem.label}`}
                >
                  <div className={styles.cardContent}>
                    <h3 className={styles.cardTitle}>
                      {subItem.label}
                    </h3>
                  </div>
                </a>
            ))}
          </div>
        </div>
    );
  }
  return null;
}

function HomepageHeader() {
  const {siteConfig} = useDocusaurusContext();
  return (
      <header className={styles.heroBanner}>
        <div className={styles.heroDecorator} />
        <div className={styles.heroContent}>
          <h1 className={styles.heroTitle} aria-label="网站标题">{siteConfig.title}</h1>
          <p className={styles.heroSubtitle} aria-label="网站标语">{siteConfig.tagline}</p>
        </div>
      </header>
  );
}

export default function Home() {
  const {siteConfig} = useDocusaurusContext();
  const navItems = (siteConfig.themeConfig as CustomThemeConfig).navbar.items;

  return (
      <>
        <Head>
          <meta name="description" content="码经心旅 - 技术博客与知识库，分享编程经验与技术见解" />
          <meta name="keywords" content="技术博客,Java,Spring,编程,知识库" />
        </Head>
        <Layout
            title={siteConfig.title}
            description={siteConfig.tagline}>
          <HomepageHeader />
          <main className={styles.main}>
            <div className={styles.container}>
              {navItems.map((item, idx) => (
                  <NavCard key={idx} item={item} />
              ))}
            </div>
          </main>
        </Layout>
      </>
  );
}
